<template>
	<view class="comment-content">
		<view class="cus-search-component" v-if="showSearch">
			<input confirm-type="search" focus v-model="dataParams.search_key" @blur="search()" placeholder="找人" />
			<button type="primary" @click="search()">搜索</button>
		</view>
		<cus-no-data v-if="noData"></cus-no-data>
		<scroll-view scroll-y class="person-list" @scrolltolower="getFilesInfo">
			<view v-for="info in infos" :key="info" @click="downloadInfoFile(info.id)" class="doc-item">
				<image :src="info.title_image"></image>
				<view>{{info.title}}</view>
				<!-- <text class="def-icon">&#xe600;</text> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infos: [],
				showSearch: false,
				dataParams: {
					search_key: "",
					type: "construction",
					page_no: 1,
					page_size: 10,
					hard_id: ""
				},
				loadMore: true,
				noData: false
			}
		},
		onLoad(param) {
			this.dataParams.hard_id = param.id
			if (param.type) {
				this.dataParams.type = param.type
			}
			if (param.type === "handbook") {
				uni.setNavigationBarTitle({
					title: '应用手册'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '施工规范'
				})
			}
			this.getFilesInfo()
		},
		onNavigationBarButtonTap() {
			this.showSearch = !this.showSearch
		},
		methods: {
			getFilesInfo() {
				if (!this.loadMore) return
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/get_document_list',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: this.dataParams,
					success: res => {
						if (res.data.data.list.length < this.dataParams.page_size) {
							this.loadMore = false
						}
						this.dataParams.page_no++
						this.infos.push(...res.data.data.list)
						if (this.infos.length === 0) {
							this.noData = true
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			search() {
				this.dataParams.page_no = 1
				uni.showLoading({
					title: '',
					mask: true
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_hard_address_list',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: this.dataParams,
					success: res => {
						if (res.data.data.info.length < this.dataParams.page_size) {
							this.loadMore = false
						}
						this.infos = res.data.data.info
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			downloadInfoFile(id) {
				if (this.dataParams.hard_id) {
					uni.navigateTo({
						url: '../../pagesChild/mainChildPage/docInfo?id=' + id,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.navigateTo({
						url: './docInfo?id=' + id,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		},
	}
</script>

<style>
	.comment-content {
		background-color: #FFFFFF;
		height: 100%;
		width: 100%;
	}

	.comment-content-item {
		background-color: #FFFFFF;
	}

	.comment-content-item-last {
		padding-bottom: 60upx;
	}

	.person-list {
		height: 100%;
	}

	.cus-image-text-col {
		padding: 40upx 40upx 0;
	}

	.person-task {
		font-size: 24upx;
	}

	#person-phone {
		display: flex;
		flex-direction: row;
		flex: 0;
	}

	#person-phone text:nth-child(2) {
		color: #008ff3;
		font-size: 30upx;
	}

	.doc-item {
		display: flex;
		padding: 40upx 20upx 20upx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}

	.doc-item view {
		flex: 1;
		margin: 20upx;
		font-weight: bold;
	}

	.doc-item image {
		background-color: #EEEEEE;
		width: 200upx;
		height: 200upx;
	}

	.doc-item text {
		font-size: 30upx;
	}
</style>
